<template>
	<div class="breadCrumbWrap">
        <el-breadcrumb separator="/">
			<el-breadcrumb-item class="index" @click="toIndex">首页</el-breadcrumb-item>
			<template v-for="(item,index) in breadcrumbArr" :key="index">
				<el-breadcrumb-item
					v-if="typeof item.secMenu != 'undefined' && item.secMenu.length > 0">
					{{item.sideBarName}}
				</el-breadcrumb-item>
				<el-breadcrumb-item
					v-if="typeof item.secMenu == 'undefined' || item.secMenu.length == 0"
					:to="{ path: item.path }">
					{{item.sideBarName}}
				</el-breadcrumb-item>
			</template>
		</el-breadcrumb>
	</div>
</template>
<script type="text/javascript" lang="ts">
	import routeConfig  from "@/router/routerConfig.ts";
	export default{
		data () {
			return {
				nowPageName:"",
				routeConfigArr:[],
				breadcrumbArr:[],
			}
		},
		created(){
			this.routeConfigArr = routeConfig;
		},
		mounted (){
			this.getPageName()
        },
        watch:{
            $route(){
				this.getPageName()
			}
        },
		components : {
			
		},
		methods : {
			getPageName(){
				let nowItem = this.getNowItem();
				if(typeof nowItem.detailName != 'undefined'){
					nowItem.sideBarName = nowItem.detailName;
					this.breadcrumbArr.push(nowItem);
				}else{
					let routePath = this.$route.path;
					this.breadcrumbArr = this.$util.findParent(routePath,this.routeConfigArr);
				}
			},
			getNowItem(){
				let routePath = this.$route.path;
				let nowItem = this.$util.arr_findItem(this.$util.treeToArray(routeConfig),routePath);
				return nowItem
			},
			toIndex(){
				this.$router.push("/index")
			}
		}
	}
</script>
<style type="text/css" lang="less">
	.breadCrumbWrap{
		height:100%;
		span{
			line-height:60px
		}
		.index{
			cursor:pointer;
			font-weight:bold;
		}
    }
</style>